<template>
  <div class="content">
    <div class="gjtjDiv">
      <TitleVue :name="'告警统计'" />
      <div class="gjChart">
        <PieCharts :id="'gjCharts'" :pieData="gjpieData" :center="['28%', '45%']" :radius="[55, 85]" :legendRight="'10%'" :legendShow="true" />
      </div>
    </div>

    <div class="ssyjDiv">
      <TitleVue :name="'实时预警'" />
      <div class="ssyjContent">
        <div class="itemDiv" v-for="(item, index) in ssyjList" :key="index">
          <div class="allItemDiv" v-if="item.unit != 'center'">
            <p>
              {{ item.val }}<span v-if="item.total">/{{ item.total }}</span>
            </p>
            <p>{{ item.unit }}</p>
          </div>
          <div class="centerDiv" v-else></div>
          <div class="nameDiv">
            <p :title="item.name">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="yjContentDiv">
      <p>根据上游雨量站实测和气象台预报结果，未来72小时1.2mm，过去72小时平均降水为0.00mm，未达预警级别。</p>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import PieCharts from '../echarts/pieCharts.vue'

export default {
  name: 'YjLeft',
  components: {
    TitleVue,
    PieCharts
  },
  data() {
    return {
      gjpieData: [
        { value: 2, name: '设备状态故障告警' },
        { value: 4, name: '雨情告警' },
        { value: 1, name: '水情告警' },
        { value: 2, name: '入侵告警' },
        { value: 3, name: '阈值告警' },
        { value: 3, name: '主动发布预警次数' }
      ],
      ssyjList: [
        {
          name: '实时降雨',
          val: 10,
          unit: 'mm'
        },
        {
          name: '实时库容',
          val: 1106.96,
          unit: '万m³'
        },
        {
          name: '未来降雨',
          val: 6,
          unit: 'mm'
        },
        {
          name: '位移监测',
          val: 0,
          total: 5,
          unit: ''
        },
        { name: '', unit: 'center' },
        {
          name: '渗压监测',
          val: 0,
          total: 6,
          unit: ''
        },
        {
          name: '实时水位',
          val: 1107.03,
          unit: 'm'
        },
        {
          name: '水质监测',
          val: 'Ⅰ',
          unit: ''
        },
        {
          name: '未来水位',
          val: 349.71,
          unit: 'm'
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .gjtjDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .gjChart {
      width: 100%;
      height: 25vh;
    }
  }
  .ssyjDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .ssyjContent {
      width: 100%;
      height: auto;
      padding: 1vh 1.2vw;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
    }
    .itemDiv {
      width: 33%;
      height: auto;
      margin-bottom: 1vh;
      .allItemDiv:hover {
        background: url('@/assets/img/common/yujingbg3.png') no-repeat;
        background-size: 100% 110%;
        background-position: center top;
      }
      .allItemDiv {
        width: 100%;
        height: 8vh;
        background: url('@/assets/img/common/yujingbg2.png') no-repeat;
        background-size: 100% 110%;
        background-position: center top;
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 2.2vh;
          color: #e0edff;
        }
        p:nth-child(2) {
          font-size: 1.7vh;
        }
      }
      .centerDiv {
        width: 100%;
        height: 10vh;
        background: url('@/assets/img/common/centerBg.png') no-repeat;
        background-size: 80% 110%;
        background-position: center center;
      }
      // .centerDiv:hover {
      //   width: 100%;
      //   height: 10vh;
      //   background: url('@/assets/img/common/centerBg2.png') no-repeat;
      //   background-size: 80% 110%;
      //   background-position: center center;
      // }
      .nameDiv {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.7vh;
        color: #ffffff;
        display: flex;
        justify-content: center;
      }
    }
  }
  .yjContentDiv {
    flex: 1;
    width: 100%;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 1vh 1.2vw;
    box-sizing: border-box;
    border: 2px solid #149dcb;
    border-radius: 10px;
    overflow: hidden;
    p {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 1.7vh;
      color: #ffffff;
    }
  }
}
</style>
